<template>
    <div>
        <el-row :gutter="10" class="row1">
            <el-col :span="24"  class="col1">
                订单统计
            </el-col>
        </el-row>

        <el-row :gutter="0" class="row2">
            <el-col :span="4" class="col1">
                <div>
                    <span style="color:gray">选中订单总数</span>
                    <p>{{ arr3.reduce((pr,cr)=>pr+cr,0) }}单</p>
                </div>
                <div>
                    <span style="color:gray">同比增长</span>
                    <p v-if="compareArr[1]>=0" style="color:green">{{ compareArr[1] }}单</p>
                    <p v-if="compareArr[1]<0" style="color:red">{{ compareArr[1] }}单</p>
                </div>
                <div>
                    <span style="color:gray">选中销售总额</span>
                    <p>￥{{ arr2.reduce((pr,cr)=>pr+cr,0) }}</p>
                </div>
                <div>
                    <span style="color:gray">同比增长</span>
                    <p v-if="compareArr[0]>=0" style="color:green">￥{{ compareArr[0] }}</p>
                    <p v-if="compareArr[0]<0" style="color:red">￥{{ compareArr[0] }}</p>
                </div>

            </el-col>
            <el-col :span="20" class="oder_date_box">
                <OderDate class="oder_date" @someEvent="fatherFn"></OderDate>
                <div id="main" style="width: 100%; height: 300px"></div>
            </el-col>
        </el-row>
        <!-- {{ getChildData[0]  }}
        <br> {{ getChildData[1]  }}
        <br> {{ getChildData[2]  }} -->
        <!-- <br />
        {{ arr1 }} <br />
        {{ arr2 }} <br />
        {{ arr3 }} -->
    </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'
import OderDate from '@/components/OderDate.vue'

/* 子传父接收数据 */
const fatherFn = (parms: any) => {
    getChildData.value = parms
}
// 定义子传父接收数据容器
const getChildData = ref('')

let arr1 = ref([])
let arr2 = ref([])
let arr3 = ref([])
// const arr1 = ref(getChildData.value[0])
// const arr2 = ref(getChildData.value[1])
// const arr3 = ref(getChildData.value[2])
// const testFn = ()=>{
//     arr2.value = ['800','700']
//     // drawBar()
// }

const drawBar = () => {
    // 初始化echarts
    const echart = echarts.init(document.getElementById('main'))
    let option = {
        title: {
            text: '订单详情图标',
            left: 50,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                animation: false,
                label: {
                    backgroundColor: '#505765',
                },
            },
        },
        legend: {
            left: 200,
            data: [
                '订单金额',
                '订单数量',
            ],
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arr1.value,
        },
        yAxis: [
            {
                name: '订单金额',
                type: 'value',
                boundaryGap: [0, '30%'],
            },
            {
                name: '订单数量',
                type: 'value',
                boundaryGap: [0, '30%'],
            },
        ],
        series: [
            {
                name: '订单金额',
                data: arr2.value,
                markLine: {
                    symbol: ['none', 'none'],
                    label: { show: false },
                    data: [
                        { xAxis: 1 },
                        { xAxis: 3 },
                        { xAxis: 5 },
                        { xAxis: 7 },
                    ],
                },
                type: 'line',
                itemStyle: {
                    color: '#4CE3C9',
                },
                smooth: 0.3,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(76,227,201,0.8)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(76,227,201,0.3)',
                        },
                    ]),
                },
            },
            {
                name: '订单数量',
                yAxisIndex: 1,
                data: arr3.value,
                markLine: {
                    symbol: ['none', 'none'],
                    label: { show: false },
                    data: [
                        { xAxis: 1 },
                        { xAxis: 3 },
                        { xAxis: 5 },
                        { xAxis: 7 },
                    ],
                },
                type: 'line',
                smooth: 0.3,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(23,194,228,0.8)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(23,194,228,0.3)',
                        },
                    ]),
                },
            },
        ],
    }
    echart.setOption(option)
}

const compareArr = ref([])
// 对比
watch([arr2,arr3],(newValue, oldValue) => {
    // console.log('newValue>>>',newValue[0].reduce(((pr,cr)=>pr+cr),0));
    // console.log('newValue>>>',newValue[1].reduce(((pr,cr)=>pr+cr),0));
    // console.log('oldValue>>>',oldValue[0].reduce(((pr,cr)=>pr+cr),0));
    // console.log('oldValue>>>',oldValue[1].reduce(((pr,cr)=>pr+cr),0));
    compareArr.value = [
        newValue[0].reduce(((pr,cr)=>pr+cr),0)-oldValue[0].reduce(((pr,cr)=>pr+cr),0),
        newValue[1].reduce(((pr,cr)=>pr+cr),0)-oldValue[1].reduce(((pr,cr)=>pr+cr),0),
    ]
})


watch(getChildData, (newValue, oldValue) => {
    // console.log(Array.from(getChildData.value[0]));
    drawBar()
    // arr1 = getChildData.value[0]?getChildData.value[0]:['2019-10-10','2019-10-11']
    // arr2 = getChildData.value[1]?getChildData.value[1]:['200','300']
    // arr3 = getChildData.value[2]?getChildData.value[2]:['300','400']

    arr1.value = Array.from(getChildData.value[0])
    arr2.value = Array.from(getChildData.value[1])
    arr3.value = Array.from(getChildData.value[2])
    drawBar()
})

onMounted(() => {
    drawBar()
})
</script>

<style lang="scss" scoped>
.row1{
    .col1{
        padding: 20px;
        font-size: 20px;
        background-color: #F1F6FC;
    }
}
.row2{
    
    .col1{
        // height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        div{
            padding: 30px;
            height: 30px;
        }
    }
    .oder_date_box{
        // padding-top: 30px;
    }
}
</style>
